<template>
<div style="width:100%;height:100%;">
  <div id="webgl" ></div>
</div>
</template>

<script>
var THREE = require('three');
var OrbitControls = require('three-orbitcontrols');
var DragControls = require('three-dragcontrols');
import { RenderPass, EffectComposer, OutlinePass } from "three-outlinepass"
export default {
 data () {
    return {
        scene:null,
        camera:null,
        renderer:null,
        light:null, 
        controls:null, 
        compose:null,
        renderPass:null,
        selectedObjects:[]
    }
  },
  methods:{
     drawScene() {
        this.iniScene();
        this.iniLight();
        this.orbitControls();
        this.windowResize();        
        this.selectedObjects.push(this.cubeDr(4, 0, 2, 0));
        this.selectedObjects.push(this.cubeDr(4, 5, 2, 0));
        this.selectedObjects.push(this.cubeDr(4, -4, 2, 0));
        this.cubeDr(4, 0, 6, 0);
        this.iniPlane();
        this.render();
    },
     iniScene() {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 3000);
        this.renderer = new THREE.WebGLRenderer();
        this.camera.position.set(-10, 10, 30);
        this.camera.lookAt( this.scene.position);
        this.renderer.setClearColor(0x222222);
        this.renderer.shadowMap.enabled = true;

        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.compose = new EffectComposer(this.renderer);
        this.renderPass = new RenderPass( this.scene, this.camera);
       
        var  outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth,window.innerHeight), this.scene,this.camera);
        outlinePass.renderToScreen = true;
        outlinePass.selectedObjects = this.selectedObjects;

        this.compose.addPass(this.renderPass);
        this.compose.addPass(outlinePass);

        var params = {
            edgeStrength: 3.0,//包围线浓度
            edgeGlow: 1,//边缘线范围
            edgeThickness: 1.0,//边缘线浓度
            pulsePeriod: 0,//包围线闪烁评率
            usePatternTexture: false
        };
        outlinePass.edgeStrength = params.edgeStrength;
        outlinePass.edgeGlow = params.edgeGlow;
        outlinePass.visibleEdgeColor.set(0xffffff);//包围线颜色
        outlinePass.hiddenEdgeColor.set(0xff00ff);//被遮挡的边界线颜色

        this.scene.add(new THREE.AxesHelper(4));
        document.getElementById('webgl').appendChild(this.renderer.domElement);
    },

     iniLight() {
        this.light = new THREE.AmbientLight(0x333333);
        this.scene.add(this.light);

        this.light = new THREE.SpotLight(0x888888);
        this.light.position.set(0, 40, 30);
        this.light.castShadow = true;
        this.light.shadow.mapSize.height = 4096;
        this.light.shadow.mapSize.width = 4096;
         this.scene.add(this.light);

        this.light = new THREE.HemisphereLight(0xffffff, 0x444444, 0.6);
        this.light.position.set(0, 200, 0);
         this.scene.add(this.light);
    },

     iniPlane() {
        var planeGeo = new THREE.PlaneGeometry(40, 40);
        var planeMat = new THREE.MeshPhongMaterial({ color: 0x999999 });
        var plane = new THREE.Mesh(planeGeo, planeMat);
        plane.receiveShadow = true;
        plane.position.y = -0.01;
        plane.rotation.x = -0.5 * Math.PI;
         this.scene.add(plane);

        var grid = new THREE.GridHelper(40, 20, 0x000000, 0x000000);
        grid.material.transparent = true;
        grid.material.opacity = 0.3;
         this.scene.add(grid);
    },

     cubeDr(a, x, y, z) {
        var cubeGeo = new THREE.BoxGeometry(a, a, a);
        // var cubeMat = new THREE.MeshPhongMaterial({
        //     color: 0xfff000 * Math.random()
        // });
        var cubeMat= new THREE.MeshLambertMaterial();
        new THREE.TextureLoader().load( "../../static/ThreeJs/images/box.png", ( map )=> {
            cubeMat.map = map;
            cubeMat.needsUpdate = true;
        } );
        var cube = new THREE.Mesh(cubeGeo, cubeMat);
        cube.position.set(x, y, z);
        cube.castShadow = true;
        this.scene.add(cube);
        return cube;
    },
    
     orbitControls() {
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);     
        this.controls.autoRotateSpeed = 0.2;
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.4;
        this.controls.enableZoom = true;
        this.controls.minDistance = 5;
        this.controls.maxDistance = 1000;
    },
  
     windowResize() {
        window.addEventListener('resize', onWindowResize, false);
        function onWindowResize() {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        }
    },
     render() {
        var clock = new THREE.Clock();
        var delta = clock.getDelta();
        requestAnimationFrame(this.render);
        this.renderer.render( this.scene, camera);
        this.compose.render(delta);
        this.controls.update(delta);
    }   
  },
  mounted(){
    this.drawScene();
  }
}
</script>

<style scoped>
#container{
  width:100%;
  height:100%;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
